<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

const goToTest = () => {
  router.push("/five/test");
};
</script>

<template>
  <div class="relative">
    <img src="/src/assets/bg.png" />
    <div class="absolute top-20 left-32  h-full">
      <div class="text-3xl font-bold text-white">
        你是真实的自己，还是隐藏在性格面具之后的过客？
      </div>
      <div class="mt-4 text-xl font-bold text-white">
        只需 5 分钟<i class="ml-4 pi pi-clock"></i>
      </div>
      <div class="text-[#d5d0d0] mt-4">
        即可科学解析你的大五人格特质，深入洞察性格核心
      </div>
      <div class="text-[#d5d0d0] mt-4">
        不仅如此，你还能了解自身优势与潜在盲点，获得个性化建议，助力自我成长与人际提升。
      </div>
      <button
        @click="goToTest"
        class="group mt-20 relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-300 ease-in-out bg-gradient-to-r from-emerald-500 to-teal-600 rounded-full shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-emerald-300 focus:ring-opacity-50"
      >
        <!-- 背景光晕效果 -->
        <div class="absolute inset-0 bg-gradient-to-r from-emerald-600 to-cyan-700 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        
        <!-- 按钮内容 -->
        <div class="relative flex items-center space-x-3">
          <span class="text-xl font-bold tracking-wide">进入测验</span>
          <div class="w-8 h-8 bg-white bg-opacity-20 backdrop-blur-sm rounded-lg flex items-center justify-center group-hover:bg-opacity-30 transition-all duration-300 group-hover:translate-x-0.5">
            <i class="pi pi-arrow-right text-blue-500 text-sm"></i>
          </div>
        </div>
        
        <!-- 微光效果 -->
        <div class="absolute inset-0 rounded-full bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-15 transform -skew-x-12 -translate-x-3/4 group-hover:translate-x-1/4 transition-all duration-500"></div>
      </button>
    </div>
  </div>
  <div class="text-center text-blue-600 font-bold text-2xl my-4">
    大五人格测试理论
  </div>
  <div class="mx-[100px] flex flex-col mb-20">
    <div class="indent-8 leading-8">
      心理学中的“人格”一词源自英文“Personality”，而“Personality”又由拉丁语“Persona”引申而来，原指古希腊戏剧中演员所佩戴的面具。心理学借用了“面具”这一意象来诠释人格，强调其双重内涵：一方面，人格是个体在社会角色中展现出来的外在表现，是他人可见的行为模式；另一方面，它也象征着个体用以隐藏真实自我的内在特征。外在表现与内在特质相互作用，共同构成了统一而复杂的人格整体（许燕，2009）。
    </div>
    <div class="indent-8 leading-8">
      著名心理学家奥尔波特（Allport）在综合分析各领域对人格的定义后，提出：人格是个体内在的心理--物理系统的动力组织，它决定个体独特的行为与思维方式。他认为，特质是人格的基本结构单元，是稳定且持久的心理特征。
    </div>
    <div class="indent-8 leading-8">
      大五人格模型（Big FivePersonality）是人格特质理论的重要成果，广泛应用于心理学研究与实践中。该模型包含五个核心维度，各维度的内涵如下（许燕，2009）：
    </div>
  </div>
  <div class="flex mx-[100px] gap-12">
    <img src="/src/assets/five.jpg" class="size-[600px]"></img>
    <div>
      <div class="flex justify-evenly flex-col h-full w-[500px]">
        <div>
          <div class="text-[#f2d66a] text-2xl font-medium">宜人性（Agreeableness）</div>
          <div>衡量个体在人际互动中的倾向，体现从同情、合作到敌意、对抗的连续谱系。高宜人性者通常友善、富有同理心、乐于助人、值得信赖，易于建立和谐的人际关系。</div>
        </div>
        <div>
          <div class="text-[#ec928a] text-2xl font-medium">开放性（Openness to Experience）</div>
          <div>又称求新性，指个体对新经验、新观念的接纳与探索态度。高开放性者通常具有丰富的想象力、好奇心强、思维灵活，欣赏艺术与美学，乐于接受多元观点与创造性思维。</div>
        </div>
        <div>
          <div class="text-[#65d7b4] text-2xl font-medium">神经质（Neuroticism）</div>
          <div>反映情绪的稳定性与个体应对压力的能力。高神经质者更容易体验焦虑、忧郁、愤怒等负面情绪，情绪波动较大，心理韧性相对较弱。</div>
        </div>
        <div>
          <div class="text-[#87c9e4] text-2xl font-medium">尽责性（Conscientiousness）</div>
          <div>描述个体在自我调节、目标导向行为中的自律与组织能力。高尽责性者通常做事有条理、计划性强、勤奋可靠、守时守信，具备较强的意志力与责任感。</div>
        </div>
        <div>
          <div class="text-[#ebdec5] text-2xl font-medium">外倾性（Extraversion）</div>
          <div>
            反映个体活动能量的强度。高外倾性者通常热情开朗、善于交际、精力充沛、乐观自信，喜欢社交与刺激，乐于参与各种活动。
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-[100px] font-medium text-2xl my-4 leading-10">
    本平台采用先进的计算机化自适应测验（Computerized Adaptive Testing, CAT）技术，能够根据您的实时作答情况智能调整题目数量，在确保专业性和准确度的同时大幅缩短测试时间。用户仅需5分钟完成测试，即可获得一份科学、详尽的个性化人格评估报告。
  </div>
</template>
